import React, { PureComponent } from 'react'
import { connect } from "react-redux";
import dayjs from "dayjs";
import { DatePicker } from 'antd'
import { withRouter } from "react-router-dom";
import { getQuery, handleQueryEqual, setQuery } from "@utils/setUrlQuery";
import { WarehouseSelect } from '@components/warehouse/WarehouseSelect'
import CustomizeTableProvide, {
    CustomizeTable,
    CustomizeTablePagination
} from "@common/presentational/CustomizeTable";
import {priceFenToYuan, priceYuanToFen} from "@utils/priceConversion";
import { 
    getInventorySalesList,
} from "@sagas/warehouse/send";
@connect(({ warehouseManagement, send }) => ({
    inventorySalesList: send.inventorySalesList,
    selectedWarehouse: warehouseManagement.selectedWarehouse
}), {
    getInventorySalesList,
})
@withRouter
class SalesList extends PureComponent {
    constructor(props) {
        super(props);
        const {
            selectedMonth = dayjs().subtract(1, 'months').format('YYYY-MM'),
            warehouseId = props.selectedWarehouse,
        } = getQuery(props.history)
        this.state = {
            selectedMonth,
            warehouseId,
        }
        console.log(dayjs().subtract(1, 'months').format('YYYY-MM'))
        this.tableRef = React.createRef()
        this.getTableInfo = this.getTableInfo.bind(this)

        this.paginationInfo = {}
        this.columns = [{
            title: '商品',
            dataIndex: 'storage_name',
            key: 'storage_name',
            width: 100,
        }, {
            title: '期初金额',
            dataIndex: 'start_amount',
            key: 'start_amount',
            width:'10%',
            render: text => priceFenToYuan(text)
        }, {
            title: '采购金额',
            dataIndex: 'purchase_amount',
            key: 'purchase_amount',
            width:'10%',
            render: text => priceFenToYuan(text)
        }, {
            title: '调拨金额',
            dataIndex: 'schedule_amount',
            key: 'schedule_amount',
            width:'10%',
            render: text => priceFenToYuan(text)
        }, {
            title: '成本金额',
            dataIndex: 'cost_amount',
            key: 'cost_amount',
            width:'10%',
            render: text => priceFenToYuan(text)
        }, {
            title: '期末金额',
            dataIndex: 'end_amount',
            key: 'end_amount',
            width:'10%',
            render: text => priceFenToYuan(text)
        }]

    }
    
    handleValueChange(key, value) {
        if (key === 'selectedMonth') {
            this.setState({
                selectedMonth: dayjs(value).format('YYYY-MM')
            }, this.initTable)
            return;
        }
        this.setState({
            [key]: value
        }, this.initTable)
    }

    getTableInfo({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        const { selectedMonth, warehouseId } = this.state
        warehouseId && this.props.getInventorySalesList({
            id: warehouseId,
            month: selectedMonth,
            pageNo: current,
            pageSize,
        })
        this.setUrlQuery()
    }

    initTable() {
        this.tableRef.current?.initPage()
    }

    setUrlQuery() {
        const { current, pageSize } = this.paginationInfo
        const { selectedMonth, warehouseId } = this.state
        const { history } = this.props
        let params = {
            selectedMonth, warehouseId, current, pageSize
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    render() {
        const { inventorySalesList } = this.props
        const { selectedMonth, warehouseId, } = this.state
        return (
            <div className="table-scroll-container warehouse-order-page">
                <div className="table-params page-params flex-vertical-center mgb-16">
                    <WarehouseSelect 
                        value={warehouseId}
                        onChange={this.handleValueChange.bind(this, 'warehouseId')}
                    />
                    <DatePicker
                        className='mgl-16'
                        value={dayjs(selectedMonth)}
                        onChange={this.handleValueChange.bind(this,'selectedMonth')}
                        picker="month"
                    />
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="warehouseOrderList" onChange={this.getTableInfo}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={this.columns}
                            dataSource={inventorySalesList.stats || []}
                            pagination
                        />
                    </div>
                    <div className="table-pagination">
                        <CustomizeTablePagination
                            total={inventorySalesList.total}
                        />
                    </div>
                </CustomizeTableProvide>
            </div>
        )
    }
}

export default SalesList